import { lazy } from "react"
import { Navigate } from "react-router-dom"
import RouteAuth from '@/components/RouteAuth'

const Layout = lazy(() => import("components/Layout"))
const Login = lazy(() => import("@/pages/Login"))
const Nopermission = lazy(() => import("@/pages/nopermission"))
const NotFound = lazy(() => import("@/pages/404"))

export const matchAll = {
  path: "*",
  element: <Navigate to='/404' replace />,
  meta: {
    title: 'notfound'
  }
}

export const baseRoutes = [
  {
    id: 'root',
    path: "/conf/*",
    element: <RouteAuth><Layout /></RouteAuth>,
    meta: {
      title: 'conf'
    },
    children: []
  },
  {
    path: "/login",
    element: <Login />,
    meta: {
      title: 'login'
    }
  },
  {
    path: "/nopermission",
    element: <Nopermission />,
    meta: {
      title: 'nopermission'
    }
  },
  {
    path: "/",
    element: <Navigate to='/conf/' replace/>
  },
  matchAll,
  {
    path: "/404",
    element: <NotFound />,
    meta: {
      title: 'notfound'
    }
  }
]
